<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrapper{
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.typing-demo{
				width: 16ch;
				animation: typing 2s steps(22),blink .5s step-end infinite alternate;
				white-space: nowrap;
				overflow: hidden;
				border-right: 3px solid;
				font-family: monospace;
				font-size: 2em;
			}
			@keyframes typing{
				from{
					width: 0;
				}
			}
			@keyframes blink{
				50%{
					border-color: transparent;
				}
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="typing-demo">
				你好，我是叶权通
			</div>
		</div>
	</body>
</html>
